<template>
  <div class="wrapper" v-loading="loading">
    <div class="list">
      <Item
        v-for="(item, index) in itemList"
        :key="item.id"
        @click="changeImgInfo(item.id)"
        :active="activeId == index"
        >{{ item.name }}</Item
      >
    </div>
    <div>
      <el-pagination
        background
        layout="prev,pager,next"
        :total="total"
        :page-size="limit"
        :current-page="currentPage"
        @current-change="changePage"
      />
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import Item from "../ImageList/Item.vue";
import { imagesList, imList } from "@/api/images.js";
import { useImgStore } from "../../stores/images.js";
const imgStore = useImgStore();
console.log(imgStore);
const activeId = ref(0);
const itemList = ref([]);

const loading = ref(false);
//总条数
const total = ref(0);

// 一页显示多少条
const limit = ref(10);

// 当前页
const currentPage = ref(1);

const changePage = (pageNum) => {
  // 接收一个参数，页码
  console.log(pageNum);
  getCatListData(pageNum);
};
const getCatListData = (p) => {
  loading.value = true;
  imagesList(p)
    .then((res) => {
      itemList.value = res.list;
      total.value = res.totalCount;
      currentPage.value = p;
    })
    .catch((err) => {
      console.log(err);
    })
    .finally(() => {
      loading.value = false;
    });
};
getCatListData();
const fn1 = () => {
  console.log("fn1");
};
const fn2 = () => {
  console.log("fn2");
};
function changeImgInfo(id) {
  imgStore.getImgInfo(id);
}
</script>

<style lang="less" scoped>
.list::-webkit-scrollbar {
  display: none;
  // overflow: hidden;
}
.wrapper {
  width: 236px;
  height: 400px;
  display: flex;
  flex-direction: column;
  // justify-content: space-between;
  // background-color: red;
  .list {
    width: 236px;
    height: 92%;
    overflow-y: scroll;
    // background-color: aquamarine;
  }
}
</style>
